<template>
  <div class="user-center">
    <div class="profile-section">
      <div class="profile-header">
        <img src="https://placekitten.com/100/100" alt="用户头像" class="avatar">
        <div class="user-info">
          <h2>用户123</h2>
          <p>VIP会员</p>
          <div class="tags">
            <span class="tag">稳健型投资者</span>
            <span class="tag">2年投资经验</span>
          </div>
        </div>
        <div class="account-summary">
          <div class="summary-item">
            <h3>总资产</h3>
            <p>¥1,100,000</p>
          </div>
          <div class="summary-item">
            <h3>总收益</h3>
            <p class="profit">+¥100,000</p>
          </div>
        </div>
      </div>
    </div>

    <div class="content-grid">
      <div class="grid-item asset-distribution">
        <h3>资产分布</h3>
        <v-chart class="chart" :option="assetDistribution" />
      </div>

      <div class="grid-item recent-transactions">
        <h3>最近交易</h3>
        <table>
          <thead>
            <tr>
              <th>日期</th>
              <th>类型</th>
              <th>名称</th>
              <th>金额</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="transaction in transactions" :key="transaction.date">
              <td>{{ transaction.date }}</td>
              <td>
                <span :class="['type-tag', transaction.type === '买入' ? 'buy' : 'sell']">
                  {{ transaction.type }}
                </span>
              </td>
              <td>{{ transaction.name }}</td>
              <td>¥{{ transaction.amount }}</td>
              <td>
                <span class="status-tag">{{ transaction.status }}</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="grid-item account-settings">
        <h3>账户设置</h3>
        <div class="settings-list">
          <div class="setting-item">
            <div class="setting-info">
              <h4>安全设置</h4>
              <p>设置账户密码、手机验证等</p>
            </div>
            <button>修改</button>
          </div>
          <div class="setting-item">
            <div class="setting-info">
              <h4>通知设置</h4>
              <p>设置交易通知、风险提醒等</p>
            </div>
            <button>修改</button>
          </div>
          <div class="setting-item">
            <div class="setting-info">
              <h4>偏好设置</h4>
              <p>设置投资偏好、风险承受能力等</p>
            </div>
            <button>修改</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.user-center {
  width: 100%;
  min-width: 1200px;
}

.profile-section {
  background: white;
  padding: 40px;
  border-radius: 10px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.profile-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 60px;
  align-items: center;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.user-info h2 {
  margin: 0;
  color: #333;
}

.tags {
  margin-top: 10px;
}

.tag {
  background: #f0f2f5;
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 10px;
  font-size: 12px;
}

.account-summary {
  display: flex;
  gap: 30px;
}

.summary-item h3 {
  color: #666;
  margin: 0;
}

.summary-item p {
  font-size: 24px;
  font-weight: bold;
  margin: 5px 0;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.grid-item {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.asset-distribution {
  grid-column: 1;
}

.chart {
  height: 400px;
  width: 100%;
}

.recent-transactions {
  grid-column: 2;
}

.account-settings {
  grid-column: 1 / -1;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.type-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.type-tag.buy {
  background: #e6f7ff;
  color: #1890ff;
}

.type-tag.sell {
  background: #f6ffed;
  color: #52c41a;
}

.status-tag {
  background: #f5f5f5;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.settings-list {
  margin-top: 20px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.setting-info h4 {
  margin: 0;
  color: #333;
}

.setting-info p {
  margin: 5px 0 0;
  color: #666;
  font-size: 14px;
}

button {
  padding: 8px 15px;
  border: 1px solid #1890ff;
  border-radius: 4px;
  background: white;
  color: #1890ff;
  cursor: pointer;
}

button:hover {
  background: #1890ff;
  color: white;
}

.profit {
  color: #52c41a;
}
</style> 